<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        .header{
            width: 600px;  /*宽*/
            height: 180px; /*高*/
            /*给边框是为了确定位置 然后这个transparent代表透明的*/
            border: 1px solid transparent; /*容器边框 宽度1px，实线，红色*/
        }

        /*无序列表容器*/
        .ul-list{
            border: 1px solid transparent;
        }
        .p-text{
            /*背景色*/
            background-color: #fefe00;
        }
        /*三角形*/
        .triangle{
            position: absolute;
            width: 0px;
            height: 0px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 10px solid black;
            border-right: 6px solid transparent;
        }
        /*向下三角形*/
        .bottom-triangle{
            position: absolute;
            width: 0px;
            height: 0px;
            border-top: 10px solid black;
            border-bottom: 6px solid transparent;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
        }

        .footer{
            display: flex;
            height: 50px;
            flex-flow: row nowrap;
            margin-top: 10px;
        }
        /*总进度条容器*/
        .footer-img{
            position: relative;
            top: 5px;
            width: 100px;
            height: 15px;
            background-image: linear-gradient(to bottom, #ffffff,#6d6d6d);/*向下渐变，从白到灰*/
            box-shadow: 0 15px 15px #f4f4f4 inset;/*向内的一像素的阴影*/
        }
        .footer-img-center{
            position: absolute;
            height: 15px;
            width: 80%;
            background-image: linear-gradient(to bottom, #a7e26a, #6e9b3a);/*向下渐变*/
            background-color: #90c355;

        }
        .footer-light{
            position: absolute;
            width: 100px;
            height: 10px;
            top: 2px;
            box-shadow: 0 3px 3px #f9f9f9 inset;/*向内的一像素的阴影*/
            opacity: 0.6;
        }
        .container{
            width: 70%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="container">
   <!--顶部容器-->
   <div class="header">
      <img src="img/syc.gif">
   </div>
   <!--无序列表容器-->
   <div class="ul-list">
       <!--无序列表-->
        <ul>
            <!--列表项-->
            <li><a href="#"> 文章精选</a></li>
            <li><a href="#"> 内容收藏</a></li>
            <li><a href="#"> 心情列表</a></li>
        </ul>

   </div>

   <h2>文章精选</h2>
   <h3>《致橡树》</h3>
    <p>
        <span class="p-text">我如果爱你</span>——
        绝不像攀援的凌霄花，
        借你的高枝炫耀自己；
        <span class="p-text">我如果爱你</span>——
        绝不学痴情的鸟儿，
        为绿荫重复单调的歌曲；
        也不止像泉源，
        常年送来清凉的慰藉；
        也不止像险峰，
        增加你的高度，衬托你的威仪。
        甚至日光，
        甚至春雨。
        不，这些都还不够！
        我必须是你近旁的一株木棉，
        作为树的形象和你站在一起。
        根，紧握在地下；
        叶，相触在云里。
        每一阵风过，
        我们都互相致意，
        但没有人，
        听懂我们的言语。
        你有你的铜枝铁干，
        像刀，像剑，也像戟；
        我有我红硕的花朵，
        像沉重的叹息，
        又像英勇的火炬。
        我们分担寒潮、风雷、霹雳；
        我们共享雾霭、流岚、虹霓。
        仿佛永远分离，
        却又终身相依。
        这才是伟大的爱情，
        坚贞就在这里：
        爱——
        不仅爱你伟岸的身躯，
        也爱你坚持的位置，
        足下的土地。

    </p>
   <div class="triangle" id="triangle"></div><span id="more" style="position: relative;left: 20px;top: -5px">显示更多</span>
    <div id="text">
        <h3>《再别康桥》</h3>
        <p>
            轻轻的我走了，
            正如我轻轻的来；
            我轻轻的招手，
            作别西天的云彩。

            那河畔的金柳，
            是夕阳中的新娘；
            波光里的艳影，
            在我的心头荡漾。

            软泥上的青荇，
            油油的在水底招摇；
            在康河的柔波里，
            我甘心做一条水草！

            那榆荫下的一潭，
            不是清泉，是天上虹；
            揉碎在浮藻间，
            沉淀着彩虹似的梦。

            寻梦？撑一支长篙，
            向青草更青处漫溯；
            满载一船星辉，
            在星辉斑斓里放歌。

            但我不能放歌，
            悄悄是别离的笙箫；
            夏虫也为我沉默，
            沉默是今晚的康桥！

            悄悄的我走了，
            正如我悄悄的来；
            我挥一挥衣袖，
            不带走一片云彩。
    </div>
    <h2>心灵成长值</h2>
    <img src="img/xh.jpg">
   <!--底部进度-->
    <div class="footer">
      今日：<div class="footer-img">
               <div class="footer-img-center"></div>
                <div class="footer-light"></div>
            </div> 80%
    </div>
</div>
</body>
<script>
    $(function () {
        //页面加载完成时隐藏
        $("#text").hide();

        var flag = 0;
        //按钮点击时触发
        $("#more").click(function () {
            //改变三角形样式
            if(flag==0){
                $("#triangle").removeClass().addClass("bottom-triangle");
                flag++;
            }else {
                $("#triangle").removeClass().addClass("triangle");
                flag=0;
            }

            //自动慢速改变高度
            $("#text").animate({height:"toggle"},"slow");
        })


    })
</script>
</html>